<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>error message handling example for grouping</title>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script src="../../../dist/vue-validator.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <validation name="validation1">
        <div class="username">
          <label for="username">username:</label>
          <validity ref="username" field="username" group="user" :validators="{
            required: { message: 'required username !!' }
          }">
            <input id="username" type="text" @input="$refs.username.validate()">
          </validity>
        </div>
        <div class="password">
          <label for="password">password:</label>
          <validity ref="password" field="password" group="password" :validators="{
            minlength: { rule: 8, message: 'too short password !!' },
            required: { message: 'required password !!' }
          }">
            <input id="password" type="password" @input="$refs.password.validate()">
          </validity>
        </div>
        <div class="confirm">
          <label for="confimr">password (confirm):</label>
          <validity ref="confirm" field="confirm" group="password" :validators="{
            minlength: { rule: 8, message: 'too short confirm !!' },
            required: { message: 'required confirm !!' }
          }">
            <input id="confirm" type="password" @input="$refs.confirm.validate()">
          </validity>
        </div>
        <input type="submit" value="send" v-if="valid">
        <ul class="errors">
          <li :class="error.field + '-' + error.validator"
              v-for="error in errors">{{error.field}}: {{error.message}}</li>
        </ul>
      </validation>
    </div>
    <script>
      new Vue({
        computed: VueValidator.mapValidation({
          valid: '$validation.validation1.valid',
          errors: '$validation.validation1.errors'
        })
      }).$mount('#app')
    </script>
  </body>
</html>
